<template>
    <div class="pages">
        <van-sticky>
            <div class="header">
                <div class="fls" @click="$router.back(-1)">
                    <img src="../../../static/images/icon-back.png" alt="">
                </div>
                <div class="centern">用户详情</div>
                <div class="fls"></div>
            </div>
        </van-sticky>
        <div class="fistcharch">基本信息</div>
        <div class="inteerset">
            <div class="listnew">
                <div class="fl_left">姓名</div>
                <div class="fr_right">{{tbdetail.name}}</div>
            </div>
            <div class="listnew">
                <div class="fl_left">电话</div>
                <div class="fr_right">{{tbdetail.phoneNo}}</div>
            </div>

            <div class="listnew">
                <div class="fl_left">所属团队</div>
                <div class="fr_right">{{tbdetail.agencyTeam.name}}</div>
            </div>
            <div class="listnew" v-if="tbdetail.role == 'FOLLOW' ">
                <div class="fl_left">团队职务</div>
                <div class="fr_right">业务经理</div>
            </div>
            <div class="listnew" v-if="tbdetail.role == 'LEADER' ">
                <div class="fl_left">团队职务</div>
                <div class="fr_right">团队长</div>
            </div>
            <div class="listnew">
                <div class="fl_left">商户数量</div>
                <div class="fr_right">{{tbdetail.totalMerchant}}</div>
            </div>

        </div>
        <div class="fistcharch">可操作信息</div>
        <div class="inteerset">
           <div class="listnew"  v-if="userinfoing.ownerType === 'AGENCY' " @click="memberRate()">
                <div class="fl_left">费率调整</div>
                <div class="fr_right">
                    <img src="../../../static/images/icon-arrow-black.png" alt="">
                </div>
            </div>
            <div class="listnew"  v-if="userinfoing.ownerType === 'AGENCY'" @click="Team_Changes(tbdetail)">
                <div class="fl_left">团队变更</div>
                <div class="fr_right">
                    <img src="../../../static/images/icon-arrow-black.png" alt="">
                </div>
            </div>
            <div class="listnew"  v-if="userinfoing.ownerType === 'AGENCY'" @click="post_Changes()">
                <div class="fl_left">职务变更</div>
                <div class="fr_right">
                    <img src="../../../static/images/icon-arrow-black.png" alt="">
                </div>
            </div>
            <div class="listnew" @click="release_relationship()">
                <div class="fl_left">解除关系</div>
                <div class="fr_right">
                    <img src="../../../static/images/icon-arrow-black.png" alt="">
                </div>
            </div>
            <!-- <div class="listnew">
                <div class="fl_left">商户列表</div>
                <div class="fr_right">
                    <img src="../../../static/images/icon-arrow-black.png" alt="">
                </div>
            </div> -->

        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import api from '../../api/managemenTteam'
Vue.prototype.$api = api
export default {
    beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
    },
    data(){
        return{
            // id:this.$route.params.id,
            id:this.$route.query.id,
            tbdetail:{
                agencyTeam:{
                    name:''
                }
            },//用户详情
            // 用户信息
            userinfoing:{
                agency:{}
            },
        }
    },
    mounted(){
        this.detail();
        this.userinfo();
    },
    methods:{
        // 获取用户信息接口
        userinfo(){
            this.$api.userinfo().then((res) =>{
                // console.log(res)
                if(res.status == '0000'){
                    this.userinfoing = res.payload;
                }else{
                    Toast(res.describe);
                }
            })
        },
        detail(){
            let data = {
                id:this.id
            }
            this.$api.teamsdetail(this.id).then((res)=>{
                console.log(res)
                if(res.status == '0000'){
                    this.tbdetail = res.payload
                }else{

                }
            })
        },
        // 团队变更
        Team_Changes(Team){
            this.$router.push({ name: "Team_Changes" ,params:{Team:Team}});
        },
        // 职务变更
        post_Changes(){
            this.$router.push({ path: '/post_Changes?tbdetail='+JSON.stringify(this.tbdetail) });
            // this.$router.push({ name: "post_Changes" });
        },
        release_relationship(){
            this.$router.push({ path: "/release_relationship?tbdetail="+JSON.stringify(this.tbdetail) });
        },

        // 成员费率调整
        memberRate(){
            this.$router.push({path:'/memberRate?item='+ this.$route.query.item +'&&tbdetail=' +JSON.stringify(this.tbdetail)})
        },
    }
}
</script>

<style scoped>
    .pages{
        width: 100%;
    }
    .header{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        box-sizing: border-box;
        background: #3288FF;
    }
    .header>.fls{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header>.fls>img{
        width: 100%;
        height: 100%;
    }
    .centern{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 17px;
        letter-spacing: 0px;
    }
    .fistcharch{
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        padding: 0 16px;
        box-sizing: border-box;
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
    }

    .inteerset{
        width: 100%;
        background: #FFFFFF;
        padding: 0 16px;
        box-sizing: border-box;
    }
    .listnew{
        width: 100%;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #F2F2F2;
    }
    .fl_left{
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 16px;
        letter-spacing: 0px;
    }
    .fr_right{
       color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 16px;
        letter-spacing: 0px;
        display: flex;
        align-items: center;
    }
    .fr_right>img{
        width: 24px;
        height: 24px;
    }
</style>
